<template>
    <div :style='{"border":"1px solid #eee","padding":"20px","boxShadow":"0px 0px 0px #ccc,inset 0px 0px 0px 0px #eee","margin":"20px auto 0","borderRadius":"4px","background":"#fff","width":"1200px","position":"relative"}'>
        <div class="section-title"
             :style='{"padding":"40px 0 30px","margin":"20px auto 20px","borderColor":"#a2e9ec","color":"#00adb5","textAlign":"center","borderRadius":"0 0 4px 4px","background":"url(http://codegen.caihongy.cn/20221123/c9c8672afe48414f86a45016ddd346b4.png) no-repeat center top,radial-gradient(circle, rgba(237,250,251,1) 35%, rgba(162,233,236,1) 100%)","borderWidth":"1px","width":"100%","fontSize":"30px","lineHeight":"30px","borderStyle":"solid","fontWeight":"600"}'>
            留言板
        </div>
        <el-form :model="form" :rules="rules" ref="form" label-width="65px" label-position="left">
            <el-form-item label="留言" prop="content">
                <el-input type="textarea" :rows="5" v-model="form.content" placeholder="请输入内容"></el-input>
            </el-form-item>
            <el-form-item label="图片" prop="cpicture">
                <file-upload
                        tip="点击上传图片"
                        action="file/upload"
                        :limit="1"
                        :multiple="true"
                        :fileUrls="form.cpicture?form.cpicture:''"
                        @change="cpictureUploadChange"
                ></file-upload>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="submitForm('form')">立即提交</el-button>
                <el-button @click="resetForm('form')">重置</el-button>
            </el-form-item>
        </el-form>
        <div class="section-content">
	  <span v-for="item in infoList" :key="item.id">
		<div class="header-block">
		  <el-avatar v-if="item.avatarurl" :size="50" :src="$config.baseUrl + item.avatarurl"></el-avatar>
		  <el-avatar v-if="!item.avatarurl" :size="50" :src="require('@/assets/touxiang.png')"></el-avatar>
		  <span class="userinfo">用户：{{item.username}}</span>
		</div>
		<div class="content-block-ask">
		  {{item.content}}
		</div>
        <div v-if="item.cpicture" class="content" style="margin: 0;flex: 1;">
            <img style="max-width: 300px;max-height: 300px;border: 2px solid #EEEEEE;margin:8px 0 0 50px;"
                 :src="$config.baseUrl+item.cpicture">
        </div>
		<div class="content-block-reply" v-if="item.reply">
		  回复：{{item.reply}}
		</div>
        <div v-if="item.rpicture" class="content" style="margin: 0;flex: 1;">
            <img style="max-width: 300px;max-height: 300px;border: 2px solid #EEEEEE;margin:8px 0 0 50px;"
                 :src="$config.baseUrl+item.rpicture">
        </div>
		<el-divider></el-divider>
	  </span>
        </div>

        <el-pagination
                background
                class="pagination"
                :pager-count="7"
                :page-size="pageSize"
                :page-sizes="pageSizes"
                prev-text="<"
                next-text=">"
                :hide-on-single-page="true"
                :layout='["total","prev","pager","next","sizes","jumper"].join()'
                :total="total"
                :style='{"padding":"0","margin":"20px auto","whiteSpace":"nowrap","color":"#333","width":"1200px","fontWeight":"500","order":"4"}'
                @current-change="curChange"
                @prev-click="prevClick"
                @next-click="nextClick"
        ></el-pagination>

    </div>
</template>

<script>
    export default {
        //数据集合
        data() {
            return {
                layouts: '',
                form: {
                    content: '',
                    userid: localStorage.getItem('userid'),
                    username: localStorage.getItem('username')
                },
                total: 1,
                pageSize: 20,
                pageSizes: [10, 20, 30, 50],
                totalPage: 1,
                rules: {
                    content: [
                        {required: true, message: '请输入内容', trigger: 'blur'}
                    ]
                },
                infoList: []
            }
        },
        created() {
            this.getInfo(1);
        },
        //方法集合
        methods: {
            getInfo(page) {
                this.$http.get('messages/list', {
                    params: {
                        page,
                        limit: this.pageSize,
                        sort: "addtime",
                        order: "desc"
                    }
                }).then(res => {
                    if (res.data.code == 0) {
                        this.infoList = res.data.data.list;
                        this.total = res.data.data.total;
                        this.pageSize = res.data.data.pageSize;
                        this.pageSizes = [this.pageSize, this.pageSize * 2, this.pageSize * 3, this.pageSize * 5];
                        this.totalPage = res.data.data.totalPage;
                    }
                });
            },
            curChange(page) {
                this.getInfo(page);
            },
            prevClick(page) {
                this.getInfo(page);
            },
            nextClick(page) {
                this.getInfo(page);
            },
            cpictureUploadChange(fileUrls) {
                this.form.cpicture = fileUrls;
            },
            submitForm(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        if (this.form.cpicture != null) {
                            this.form.cpicture = this.form.cpicture.replace(new RegExp(this.$config.baseUrl, "g"), "");
                        }
                        this.form.avatarurl = localStorage.getItem('headportrait') ? localStorage.getItem('headportrait') : '';
                        this.$http.post('messages/add', this.form).then(res => {
                            if (res.data.code == 0) {
                                this.$message({
                                    type: 'success',
                                    message: '留言成功!',
                                    duration: 1500,
                                    onClose: () => {
                                        this.form.content = '';
                                        this.getInfo(1);
                                    }
                                });
                            }
                        });
                    } else {
                        return false;
                    }
                });
            },
            resetForm(formName) {
                this.$refs[formName].resetFields();
            }
        }
    }
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
    .section {
        width: 900px;
        margin: 0 auto;
    }

    .section-content {
        margin-top: 50px;
    }

    .section-pagination {
        margin-top: 30px;
        text-align: center;
    }

    .header-block {
        height: 50px;
        line-height: 50px;
        display: flex;
    }

    .userinfo {
        align-self: center;
        margin-left: 15px;
    }

    .content-block-ask, .content-block-reply {
        margin-left: 65px;
        margin-top: 15px;
    }

    .content-block-reply {
        margin-top: 30px;
    }

    .z-box {
        width: 100% !important;
    }

    .el-pagination /deep/ .el-pagination__total {
        margin: 0 10px 0 0;
        color: #666;
        font-weight: 400;
        display: inline-block;
        vertical-align: top;
        font-size: 13px;
        line-height: 28px;
        height: 28px;
    }

    .el-pagination /deep/ .btn-prev {
        border: none;
        border-radius: 2px;
        padding: 0;
        margin: 0 5px;
        color: #666;
        background: #f4f4f5;
        display: inline-block;
        vertical-align: top;
        font-size: 13px;
        line-height: 28px;
        min-width: 35px;
        height: 28px;
    }

    .el-pagination /deep/ .btn-next {
        border: none;
        border-radius: 2px;
        padding: 0;
        margin: 0 5px;
        color: #666;
        background: #f4f4f5;
        display: inline-block;
        vertical-align: top;
        font-size: 13px;
        line-height: 28px;
        min-width: 35px;
        height: 28px;
    }

    .el-pagination /deep/ .btn-prev:disabled {
        border: none;
        cursor: not-allowed;
        border-radius: 2px;
        padding: 0;
        margin: 0 5px;
        color: #C0C4CC;
        background: #f4f4f5;
        display: inline-block;
        vertical-align: top;
        font-size: 13px;
        line-height: 28px;
        height: 28px;
    }

    .el-pagination /deep/ .btn-next:disabled {
        border: none;
        cursor: not-allowed;
        border-radius: 2px;
        padding: 0;
        margin: 0 5px;
        color: #C0C4CC;
        background: #f4f4f5;
        display: inline-block;
        vertical-align: top;
        font-size: 13px;
        line-height: 28px;
        height: 28px;
    }

    .el-pagination /deep/ .el-pager {
        padding: 0;
        margin: 0;
        display: inline-block;
        vertical-align: top;
    }

    .el-pagination /deep/ .el-pager .number {
        cursor: pointer;
        padding: 0 4px;
        margin: 0 5px;
        color: #666;
        display: inline-block;
        vertical-align: top;
        font-size: 13px;
        line-height: 28px;
        border-radius: 2px;
        background: #f4f4f5;
        text-align: center;
        min-width: 30px;
        height: 28px;
    }

    .el-pagination /deep/ .el-pager .number:hover {
        cursor: pointer;
        padding: 0 4px;
        margin: 0 5px;
        color: #fff;
        display: inline-block;
        vertical-align: top;
        font-size: 13px;
        line-height: 28px;
        border-radius: 2px;
        background: #00adb5;
        text-align: center;
        min-width: 30px;
        height: 28px;
    }

    .el-pagination /deep/ .el-pager .number.active {
        cursor: default;
        padding: 0 4px;
        margin: 0 5px;
        color: #FFF;
        display: inline-block;
        vertical-align: top;
        font-size: 13px;
        line-height: 28px;
        border-radius: 2px;
        background: #00adb5;
        text-align: center;
        min-width: 30px;
        height: 28px;
    }

    .el-pagination /deep/ .el-pagination__sizes {
        display: inline-block;
        vertical-align: top;
        font-size: 13px;
        line-height: 28px;
        height: 28px;
    }

    .el-pagination /deep/ .el-pagination__sizes .el-input {
        margin: 0 5px;
        width: 100px;
        position: relative;
    }

    .el-pagination /deep/ .el-pagination__sizes .el-input .el-input__inner {
        border: 1px solid #DCDFE6;
        cursor: pointer;
        padding: 0 25px 0 8px;
        color: #606266;
        display: inline-block;
        font-size: 13px;
        line-height: 28px;
        border-radius: 3px;
        outline: 0;
        background: #FFF;
        width: 100%;
        text-align: center;
        height: 28px;
    }

    .el-pagination /deep/ .el-pagination__sizes .el-input span.el-input__suffix {
        top: 0;
        position: absolute;
        right: 0;
        height: 100%;
    }

    .el-pagination /deep/ .el-pagination__sizes .el-input .el-input__suffix .el-select__caret {
        cursor: pointer;
        color: #C0C4CC;
        width: 25px;
        font-size: 14px;
        line-height: 28px;
        text-align: center;
    }

    .el-pagination /deep/ .el-pagination__jump {
        margin: 0 0 0 24px;
        color: #606266;
        display: inline-block;
        vertical-align: top;
        font-size: 13px;
        line-height: 28px;
        height: 28px;
    }

    .el-pagination /deep/ .el-pagination__jump .el-input {
        border-radius: 3px;
        padding: 0 2px;
        margin: 0 2px;
        display: inline-block;
        width: 50px;
        font-size: 14px;
        line-height: 18px;
        position: relative;
        text-align: center;
        height: 28px;
    }

    .el-pagination /deep/ .el-pagination__jump .el-input .el-input__inner {
        border: 1px solid #DCDFE6;
        cursor: pointer;
        padding: 0 3px;
        color: #606266;
        display: inline-block;
        font-size: 14px;
        line-height: 28px;
        border-radius: 3px;
        outline: 0;
        background: #FFF;
        width: 100%;
        text-align: center;
        height: 28px;
    }
</style>
